<template>
  <!--begin::Authentication Layout -->
  <div class="d-flex flex-column flex-lg-row flex-column-fluid">
    <!--begin::Body-->
    <div class="d-flex flex-column flex-lg-row-fluid w-lg-50 order-lg-1 order-2 p-10">
      <!--begin::Form-->
      <div class="d-flex flex-center flex-column flex-lg-row-fluid">
        <!--begin::Wrapper-->
        <div class="w-lg-500px p-10">
          <router-view></router-view>
        </div>
        <!--end::Wrapper-->
      </div>
      <!--end::Form-->

      <!--begin::Footer-->
      <div class="d-flex flex-center flex-wrap px-5">
        <!--begin::Links-->
        <div class="d-flex fw-semibold text-primary fs-base">
          <a href="#" class="px-5" target="_blank">Terms</a>

          <a href="#" class="px-5" target="_blank">Plans</a>

          <a href="#" class="px-5" target="_blank">Contact Us</a>
        </div>
        <!--end::Links-->
      </div>
      <!--end::Footer-->
    </div>
    <!--end::Body-->

    <!--begin::Aside-->
    <div
      class="d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-lg-2 order-1"
      :style="`background-image: url('${getAssetPath('media/misc/auth-bg.png')}')`"
    >
      <!--begin::Content-->
      <div class="d-flex flex-column flex-center py-lg-15 px-md-15 w-100 px-5 py-7">
        <!--begin::Logo-->
        <router-link to="/" class="mb-lg-12 mb-0">
          <img
            alt="Logo"
            :src="getAssetPath('media/logos/custom-1.png')"
            class="h-60px h-lg-75px"
          />
        </router-link>
        <!--end::Logo-->

        <!--begin::Image-->
        <img
          class="d-none d-lg-block w-275px w-md-50 w-xl-500px mb-lg-20 mx-auto mb-10"
          :src="getAssetPath('media/misc/auth-screens.png')"
          alt=""
        />
        <!--end::Image-->
      </div>
      <!--end::Content-->
    </div>
    <!--end::Aside-->
  </div>
  <!--end::Authentication Layout -->
</template>

<script lang="ts">
import { getAssetPath } from '@/core/helpers/assets';
import { defineComponent, onMounted } from 'vue';
import LayoutService from '@/core/services/LayoutService';
import { useBodyStore } from '@/stores/body';

export default defineComponent({
  name: 'auth-layout',
  components: {},
  setup() {
    const store = useBodyStore();

    onMounted(() => {
      LayoutService.emptyElementClassesAndAttributes(document.body);

      store.addBodyClassname('app-blank');
      store.addBodyClassname('bg-body');
    });

    return {
      getAssetPath,
    };
  },
});
</script>
